<template>
  <div class="ide flex-column" @drop="preventEvent" @dragover="preventEvent">
    <div class="ide-head flex-row-between flex-row-center">
      <slot name="title">
        <span class="ide-title">{{ title ? title : "IDE" }}</span>
      </slot>
      <slot name="action">
        <div class="ide-action flex-row-center">
          <label class="aux-mini flex-row-center" v-if="needJsHint">
            <input
              type="checkbox"
              style="opacity: .7;margin-bottom:-2px;margin-right:2px"
              @change="jsHints"
              v-model="hintJs"
            />
            代码检查
          </label>
          <span
            title="格式化"
            @click="format"
            class="flex-row-center btn-format click"
          >
            <Icon class="icon-format" type="format" />
          </span>
        </div>
      </slot>
    </div>
    <div class="ide-body flex-column">
      <textarea ref="editor" class="ide-textarea"></textarea>
    </div>
  </div>
</template>
<script>
import editor from "./editor.js";
export const components = {};
export default {
  props: ["title"],
  components,
  mixins: [editor],
  data() {
    return {
      hintJs: true,
    };
  },
  methods: {
    preventEvent(ev) {
      ev.preventDefault();
      ev.stopPropagation();
    },
  },
};
</script>
<style src="./IDE.css"></style>
<style></style>
